{% macro render_editor(field_edit, syntax) %}

<style>
    #editor {
        width: 100%;
        min-height: 300px;
        border: 1px solid #ccc;
    }
</style>

<script src="https://www.unpkg.com/ace-builds@latest/src-noconflict/ace.js"></script>
<!-- load ace language tools -->
<script src="https://www.unpkg.com/ace-builds@latest/src-noconflict/ext-language_tools.js"></script>

<textarea name="{{field_edit.name}}" id="{{field_edit.name}}" style="display:none;"></textarea>
<div id="editor">{{ field_edit }}</div>

<script>
    ace.require("ace/ext/language_tools");
    var buildDom = ace.require("ace/lib/dom").buildDom;
    var editor = ace.edit("editor",
        {
            theme: "ace/theme/chrome",
            mode: "ace/mode/{{syntax}}",
            autoScrollEditorIntoView: true,
            maxLines: 40,
            minLines: 5
        });
    editor.session.setMode("ace/mode/{{syntax}}");
    editor.setTheme("ace/theme/chrome");
    editor.setFontSize(16);

    // enable autocompletion and snippets
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    });

    const inputElement = document.getElementById('editor');
    const formElement = inputElement.closest('form');;
    formElement.addEventListener('submit', function (event) {
        var code = editor.getValue();
        document.getElementById('{{field_edit.name}}').value = code;
    });

    
    {%if syntax == 'python' %}
    // TODO Custom keywords for autocompletion
    var customKeywords = ["setProperty","callMethod", "say"]

    var customCompleter = {
        getCompletions: function(editor, session, pos, prefix, callback) {
            if (prefix.length === 0) {
                callback(null, []);
                return;
            }
            var customWordList = customKeywords.map(function(word) {
                return {
                    caption: word,
                    value: word,
                    meta: "osysHome"
                };
            });
            callback(null, customWordList);
        }
    };
    // Add the custom completer to the completers array
    editor.completers.push(customCompleter);

    // Custom snippets
    var customSnippets = [
        {
            content: "console.log('${1:message}');",
            name: "log",
            tabTrigger: "log",
            scope: "python"
        },
        {
            content: "function ${1:functionName}(${2:args}) {\n\t${3:// body}\n}",
            name: "function",
            tabTrigger: "func",
            scope: "python"
        }
    ];

    // TODO Добавление пользовательских сниппетов
    var snippetManager = ace.require("ace/snippets").snippetManager;
    var id = 'ace/mode/python';
    var m = snippetManager.files[id];
    console.log(snippetManager,snippetManager.files, id, m)
    if (m) {
        customSnippets.forEach(function(snippet) {
            m.snippets.push(snippet);
        });
        snippetManager.register(m.snippets, m.scope);
    }

    {%endif%}
</script>

{% endmacro %}